/*
 * @Author: caijw 
 * @Date: 2018-11-11 12:55:05 
 * @Last Modified by: caijw
 * @Last Modified time: 2018-11-25 18:51:04
 * 
 * 消息记录
 */
import React, { Component } from 'react';
import Header from '../../../components/Header/Header';
import NoMessage from './NoMessage';
import { connect } from "react-redux";
import {loadMore} from '../../../utils';
import { Toast,loading } from 'react-weui';
import * as actions from '../../../store/action/my';
import '../../../static/css/common.less';
import './message.less';

class Message extends Component {

    state = {
        hasMessage : true
    }


    logout = () =>{
        localStorage.setItem('token', '');
        //判断是否登陆
        this.isLogin();
    }
    //判断是否登陆
    isLogin = () => {
        if(!localStorage.getItem('token')){
            this.props.history.push('/glogin')
        }
    }

    componentDidMount(){
         //判断是否登陆
         this.isLogin();

        this.props.fetchMessage();
        loadMore(this.mainContent,this.props.fetchMessage);
    }

    render() {
        return (
            <div>
                <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                <div className="detail-region">
                    <Header title="消息记录"></Header>
                    <section className="content mess-content" ref={ref=>this.mainContent=ref}>
                    {this.props.my.message.messageList.length>0? 
                         <div className="has-message">
                         {this.props.my.message.messageList.map((item)=>{
                            return <div className="message-item">
                                <div className="message-title">{item.push_title}</div>
                                <div className="message-time">{item.updated_at}</div>
                                <div className="message-line"></div>
                                <div className="message-content">
                                    {item.push_message}
                                </div>
                            </div>
                        })}
                        </div>
                    : <NoMessage></NoMessage>}
                    
                    </section>
                </div>
            </div>
        )
    }
}

//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(Message);